<template>
    <div class="searchResult">
        <form action="/">
            <van-search v-model="value" show-action placeholder="小米" @search="onSearch(value)" @cancel="onCancel" />
        </form>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
        <div class="paihang">
            <div class="box" v-for="(v, index) in arr" :key="index" @click="fun(v.proid)">
                <img :src="v.img1" />
                <div class="text">
                    <p>{{ v.proname }}</p>
                    <p>
                        <span><i>¥</i>
                            {{ v.originprice }}</span>
                        <span><van-icon name="cart-circle-o" color="red" size="1.25rem" /></span>

                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import service from "../../../request/service";
import searchTop from '../public/searchTop.vue'
export default {
    data() {
        return {
            value1: 0,
            value2: 'a',
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
            arr: [],
            value:"",
        };
    },
    methods:{
        fun(v){
            this.$router.push({path:'/infogoods',query:{from:'search',id:v}})
        },
        onSearch(val) {
            this.$router.push({query:{key:val}})
            service({
            url: `http://121.89.205.189:3000/api/pro/search/`,
            method: "get",
            params:{
                keyword:this.$route.query.key
            }
        }).then((res) => {
            this.arr = res.data.data;
        });
        },
        onCancel() {
            this.$router.push('./home')
        },
    },
    mounted() {
        service({
            url: `http://121.89.205.189:3000/api/pro/search/`,
            method: "get",
            params:{
                keyword:this.$route.query.key
            }
        }).then((res) => {
            this.arr = res.data.data;
            console.log(res.data.data);
        });

    }
}
</script>

<style scoped>
    .paihang{
        column-count:2;
    column-gap: 4.3rem;
    box-sizing: border-box;
    padding: .8125rem 1.625rem;
    }
    .paihang .box {
    break-inside: avoid;
    border-radius: .625rem;
    background-color: #fff;
    margin-bottom: .9rem;
    width: 7.1875rem;
    height:12.375rem;
    /* width: 31%; */
    }
    .paihang .box img{
    height:7.1875rem;
    width: 7.1875rem;
    border-top-left-radius: .625rem;
    border-top-right-radius: .625rem;
    }
    .paihang  .text{
    padding: 8px;
    text-align: left;
    font-weight: bold;
     height: 32%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .paihang  .text p:first-child{
    font-size: .6875rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
    }
    .paihang  .text p:last-child{
    color: #f66;
    font-size: .6875rem;
    display:flex;
    justify-content: space-between;
    align-items:center;
    }
</style>